<template>
	<wd-config-provider :theme-vars="themeVars">
		<view class="container">
			<wd-row>
				<wd-col :span="24">
					<wd-header>
						<wd-navbar title="游戏社交" custom-style="background: #fff;">
							<template #left>
								<wd-icon name="search" size="20px" />
							</template>
						</wd-navbar>
					</wd-header>
				</wd-col>
			</wd-row>
			<wd-row>
				<wd-col :span="24">
					<wd-grid :column="3">
						<wd-grid-item icon="picture" text="文字" />
						<wd-grid-item icon="picture" text="文字" />
						<wd-grid-item icon="picture" text="文字" />
						<wd-grid-item icon="picture" text="文字" />
						<wd-grid-item icon="picture" text="文字" />
						<wd-grid-item icon="picture" text="文字" />
					</wd-grid>
				</wd-col>
			</wd-row>
			<wd-row>
				<wd-col :span="24">
					<wd-cell icon="setting" title="帮助与反馈" is-link to="/pages/index/index" />
					<wd-cell icon="setting" title="设置" value="内容" is-link to="/pages/button/index" replace></wd-cell>
				</wd-col>
			</wd-row>
			<wd-row>
				<wd-col :span="24">
					<wd-tag :span="6" type="primary" mark plain>标签</wd-tag>
					<wd-tag :span="6" type="danger" mark plain>标签</wd-tag>
					<wd-tag :span="6" type="warning" mark plain>标签</wd-tag>
					<wd-tag :span="6" type="success" mark plain>标签</wd-tag>
				</wd-col>
				<wd-col :span="24">
					<wd-button @click="handleClick">打开弹窗</wd-button>
					<wd-popup v-model="showPopup" position="bottom" @after-enter="handlePopupShow" closable
						custom-style="height: 200px;padding: 0 24rpx;">
						<view class="title">在弹出框中使用</view>
						<wd-segmented :options="list" v-model:value="current" ref="segmentedRef"></wd-segmented>
					</wd-popup>
				</wd-col>
				<wd-col :span="24">
					<wd-button type="primary" @click="handleLogin">登录</wd-button>
				</wd-col>
			</wd-row>
		</view>
		<wd-fab :draggable="true"></wd-fab>
		<wx-login-popup :visible="true" @success="handleLoginSuccess" @fail="handleLoginFail" />
	
	</wd-config-provider>
</template>

<script lang="ts" setup>
import { ref, reactive } from "vue";
import { useCool, useStore } from "/@/cool";
import { useI18n } from "vue-i18n";

const { router } = useCool();
const { user } = useStore();
const { t } = useI18n();
const value = ref<boolean>(false)
const img = ref<string>('/static/logo.png')
const link = ref<string>('/pages/index/index')
const list = ref<string[]>(['评论', '点赞', '贡献', '打赏'])
const current = ref('点赞')
const showLoginPopup = ref(false)

const handleLogin = () => {
	showLoginPopup.value = true
}
// 登录成功
const handleLoginSuccess = (res: any) => {
	console.log('登录成功', res);
}

// 登录失败
const handleLoginFail = (err: any) => {
	console.log('登录失败', err);
}
const segmentedRef = ref<SegmentedInstance>() // 获取分段器实例
const showPopup = ref(false) // 控制popup显示
/**
 * 点击按钮打开popup
 */
function handleClick() {
	showPopup.value = true
}
/**
 * popup打开后更新分段器样式
 */
function handlePopupShow() {
	segmentedRef.value?.updateActiveStyle()
}
const themeVars = reactive({
	buttonPrimaryBgColor: "#07c160",
	buttonPrimaryColor: "#fff"
});
const activeTab = ref(0)
const showToast = ref(false);
const toastMessage = ref("操作成功");

const openToast = () => {
	showToast.value = true;
};
</script>

<style lang="scss" scoped>
.container {
	min-height: 100vh;
	padding: 90rpx 24rpx 150rpx;
	background-color: #f5f5f5;
	box-sizing: border-box;
}
</style>
